<template>
	<view class="question-test" v-if="!pageObj.loading">
		<view class="block">
			<!-- 问题类型 -->
			<view class="type" :class="dataObj.type">{{dataObj.typeName}}</view>
			<!-- 问题 -->
			<view class="title">{{dataObj.questionNumber + '. ' + dataObj.title}}</view>
			<!-- 选项 -->
			<view class="options">
				<view class="o-item" :class="item.select ? 'selected' : ''" v-for="(item, idx) in dataObj.options" :key="item.optionLetter" @click="onOptionTap(idx)">
					<view class="o-item-letter">{{item.optionLetter}}</view>
					<span>{{item.optionContent}}</span>
				</view>
			</view>
			<!-- 答案 -->
			<view class="result" v-if="dataObj.trueAnswer && (dataObj.trueAnswer === dataObj.studentAnswer)">
				<span class="right">正确</span>
			</view>
			<view class="result" v-if="dataObj.trueAnswer && (dataObj.trueAnswer !== dataObj.studentAnswer)">
				<span class="wrong">错误</span>，正确答案是<span class="stonger">{{dataObj.trueAnswer}}</span>。
			</view>
		</view>
		<!-- 答案解析 -->
		<view class="analysis" v-if="dataObj.trueAnswer">
			<view class="a-title">答案解析：</view>
			<span>{{dataObj.remark}}</span>
			
		</view>
		<!-- 题目操作 -->
		<view class="opts">
			<view v-if="dataObj.exercisesType === '1'">
				<view class="last" @click="onChangeTap('last')" v-if="dataObj.questionNumber > 1">上一题</view>
				<view class="sequence" @click="pageObj.showMenu = true">
					<image class="menu-icon" src="../../static/images/question/menu.png"></image>
					{{dataObj.questionNumber}}/{{dataObj.list.length}}
				</view>
				<view class="next" @click="onChangeTap('next')" v-if="dataObj.questionNumber < dataObj.list.length">下一题</view>
			</view>
			<view v-else>
				<view class="next" @click="onChangeTap('next')">下一题</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<view class="reset" @click="onResetTap" v-if="dataObj.exercisesType === '1'">
				<image class="icon" src="../../static/images/question/reset.png"></image>
				重置
			</view>
			<view class="collect" :class="dataObj.collect ? 'collected' : ''" @click="onCollectTap">
				<image v-if="dataObj.collect" class="icon" src="../../static/images/question/collected.png"></image>
				<image v-else class="icon" src="../../static/images/question/collect.png"></image>
				放入错题
			</view>
			<view class="post-btn" @click="onPostAnswerTap" v-if="!dataObj.trueAnswer">提交答案</view>
		</view>
		<!-- 所有题目排序 -->
		<view class="popup" v-if="pageObj.showMenu" @click="pageObj.showMenu = false">
			<view class="block" @click.stop="pageObj.showMenu = true">
				<view class="p-header">
					<image class="menu-icon" src="../../static/images/question/menu.png"></image>
					{{dataObj.questionNumber}}/{{dataObj.list.length}}
					<image class="close-icon" src="../../static/images/common/close.png" @click.stop="pageObj.showMenu = false"></image>
				</view>
				<view class="menu-list">
					<view class="menu-item" :class="item.state" v-for="(item, idx) in dataObj.list" :key="item.id" @click.stop="onSelectQuestionTap(idx)">{{idx + 1}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { requestErrorTip, loginExam } from '@/common/tools.js';
	
	export default {
		data() {
			return {
				pageObj: {
					showMenu: false, // 菜单弹窗显示状态
					loading: false, // 加载状态
					typeNameObj: {
						'1': '单选题',
						'2': '多选题',
						'3': '判断题'
					},
					stateObj: {
						'1': '',
						'2': 'right',
						'3': 'wrong'
					}
				},
				dataObj: {
					subjectId: '', // 科目id
					exercisesType: '', // 题目类型
					questionId: '', // 考题id
					questionNumber: '', // 考题排号
					type: '', // 默认单选
					title: '', // 考题题目
					options: [], // 考题选项
					studentAnswer: '', // 用户选择的答案
					trueAnswer: '', // 正确答案
					remark: '', // 解析
					collect: false, // 收藏
					list: [] // 题目排序
				}
			}
		},
		onLoad(event) {
			this.pageObj['loading'] = true;
			const title = event['title']; // 获取试题名称
			this.dataObj['subjectId'] = event['id']; // 获取试题id
			this.dataObj['exercisesType'] = event['type']; // 获取试题类型
			if (this.dataObj['exercisesType'] === '1') {
				this.dataObj['questionNumber'] = ' ';
			} else {
				this.dataObj['questionNumber'] = 1;
			}
			uni.setNavigationBarTitle({
			　　title: title
			});
			// 获取问卷数据
			this.getQuestion();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getQuestion();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 选项点击事件
			onOptionTap(index) {
				if (this.dataObj['trueAnswer']) return false;
				const type = this.dataObj['type'];
				if (type === 'single') {
					// 单选
					this.dataObj['options'].forEach((item, i) => {
						if(i === index) {
							item['select'] = true;
						} else {
							item['select'] = false;
						}
					});
				} else {
					// 多选
					this.dataObj['options'][index]['select'] = !this.dataObj['options'][index]['select'];
				}
				// this.dataObj['list'][this.dataObj['questionNumber'] - 1]['state'] = true;
			},
			// 跟换页面题目(上一题、下一题的更换操作)
			onChangeTap(param) {
				if (!param) return false;
				if(this.dataObj['trueAnswer'] && this.dataObj['exercisesType'] === '1') {
					if (this.dataObj['trueAnswer'] === this.dataObj['studentAnswer']) {
						this.setListState('right');
					} else {
						this.setListState('wrong');
					}
				} else {
					this.setListState('');
				}
				if (param === 'last') { // 上一题
					// 不能小于1
					if (this.dataObj['questionNumber'] <= 1) return false;
					this.dataObj['questionNumber']--;
					this.getQuestion();
				} else if (param === 'next') { // 下一题
					// 不能大于题目总数
					if (this.dataObj['questionNumber'] >= this.dataObj.list.length && this.dataObj['exercisesType'] === '1') return false;
					this.dataObj['questionNumber']++;
					this.getQuestion();
				}
			},
			// 选择题目
			onSelectQuestionTap(index) {
				if(this.dataObj['trueAnswer'] && this.dataObj['exercisesType'] === '1') {
					if (this.dataObj['trueAnswer'] === this.dataObj['studentAnswer']) {
						this.setListState('right');
					} else {
						this.setListState('wrong');
					}
				} else {
					this.setListState('');
				}
				this.dataObj['questionNumber'] = index + 1;
				this.pageObj['showMenu'] = false;
				this.getQuestion();
			},
			// 重置页面数据
			resetPageData() {
				this.dataObj['questionNumber'] = 1;
				this.dataObj['list'] = this.dataObj['list'].filter( item => {
					item['state'] = '';
					return item;
				});
			},
			// 收藏
			onCollectTap() {
				this.$Requset({
					url: this.$Api['exam']['misCollection'],
					data: {
						token_exam: uni.getStorageSync('examToken'),
						studentId: uni.getStorageSync('studentId'),
						questionId: this.dataObj['questionId'],
						saveOrDel: this.dataObj['collect'] ? 'del' : 'save'
					},
					success: (res) => {
						const { data, status, message } = res;
						if (!status) {
							requestErrorTip('toast', message);
							return;
						}
						this.dataObj['collect'] = !this.dataObj['collect'];
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 重置试卷
			onResetTap() {
				uni.showModal({
					title: '确定重置练习吗？',
					confirmColor: '#FE6B00',
					success: (res) => {
						if (res.confirm) {
							// 确认
							this.postReset();
						}
					}
				});
			},
			// 提交重置
			postReset() {
				this.$Requset({
					url: this.$Api['exam']['subjectReset'],
					data: {
						token_exam: uni.getStorageSync('examToken'),
						studentId: uni.getStorageSync('studentId'),
						subjectId: this.dataObj['subjectId']
					},
					success: (res) => {
						const { data, status, message } = res;
						if (!status) {
							requestErrorTip('toast', message);
							return;
						}
						this.resetPageData();
						if (status === 103) {
							const userInfo = uni.getStorageSync('userInfo');
							const mobile = userInfo['mobile'];
							loginExam(mobile, () => {
								this.postReset();
							});
							return;
						}
						this.getQuestion();
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 获取试题
			getQuestion() {
				this.$Requset({
					url: this.$Api['exam']['getQuestionInfo'],
					data: {
						token_exam: uni.getStorageSync('examToken'),
						studentId: uni.getStorageSync('studentId'),
						subjectId: this.dataObj['subjectId'],
						exercisesType: this.dataObj['exercisesType'],
						sort: this.dataObj['questionNumber'],
						state: this.dataObj['questionNumber'] === ' ' ? 1 : 2,
					},
					method: 'POST',
					success: (res) => {
						const { data, status, message } = res;
						if (status !== 300) {
							if (status === 103) {
								const userInfo = uni.getStorageSync('userInfo');
								const mobile = userInfo['mobile'];
								loginExam(mobile, () => {
									this.getQuestion();
								});
								return;
							}
							requestErrorTip('toast', message);
							return;
						}
						// 隐藏加载
						this.pageObj['loading'] = false;
						
						const questionInfo = data['questionInfo'];
						// 题目所有序号
						if (!this.dataObj['list'].length && data['menuSortInfoList']) {
							this.dataObj['list'] = data['menuSortInfoList'];
							this.dataObj['list'] = this.dataObj['list'].filter(item => {
								item['state'] = this.pageObj['stateObj'][item['state']];
								return item;
							});
						}
						console.log(questionInfo, 'questionInfo');
						this.dataObj['questionId'] = questionInfo['questionId'];
						// 题目类型
						this.dataObj['type'] = questionInfo['optionType'] === 2 ? 'multiple' : 'single';
						this.dataObj['typeName'] = this.pageObj['typeNameObj'][questionInfo['optionType']];
						// 题目序号
						this.dataObj['questionNumber'] = questionInfo['sort'];
						// 题目问题
						this.dataObj['title'] = questionInfo['questionContent'];
						// 题目学生答案
						this.dataObj['studentAnswer'] = questionInfo['studentAnswer'];
						// 题目正确答案
						this.dataObj['trueAnswer'] = questionInfo['trueAnswer'];
						// 解析
						this.dataObj['remark'] = questionInfo['remark'];
						// 收藏
						this.dataObj['collect'] = questionInfo['isCollection'];
						// 题目选项
						this.dataObj['options'] = questionInfo['optionInfoList'].filter((item) => {
							item['select'] = false;
							return item;
						});
						// 获取选项的下标值
						this.getSelectedIndex(questionInfo['studentAnswer']);
						if (this.dataObj['exercisesType'] === '1') {
							// 当前题目高亮
							this.setListState('light');
						}
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			setListState(state) {
				if(this.dataObj['list'].length === 0) return false;
				const index = this.dataObj['questionNumber'] - 1;
				this.dataObj['list'][index]['state'] = state;
			},
			// 获取选中的下标值
			getSelectedIndex(str) {
				if (str === undefined || str === 'undefined') return;
				const selectArr = str.split(',');
				for(const index in selectArr) {
					const value = selectArr[index];
					this.dataObj['options'].forEach((item) => {
						if(item['optionLetter'] === value) {
							item['select'] = true;
						}
					});
				}
			},
			// 提交答案
			onPostAnswerTap() {
				let selectAnswer = '';
				this.dataObj['options'].forEach((item, index) => {
					if (!item.select) return;
					if (selectAnswer) {
						selectAnswer += ',' + item.optionLetter;
					} else {
						selectAnswer = item.optionLetter;
					}
				});
				
				if(selectAnswer) {
					this.dataObj['studentAnswer'] = selectAnswer;
					this.$Requset({
						url: this.$Api['exam']['recordAnswer'],
						data: {
							token_exam: uni.getStorageSync('examToken'),
							studentId: uni.getStorageSync('studentId'),
							studentAnswer: selectAnswer,
							questionId: this.dataObj['questionId'],
							exercisesType: this.dataObj['exercisesType']
						},
						method: 'POST',
						success: (res) => {
							const { data, status, message } = res;
							if (!status) {
								requestErrorTip('toast', message);
								return;
							}
							if (status === 103) {
								const userInfo = uni.getStorageSync('userInfo');
								const mobile = userInfo['mobile'];
								loginExam(mobile, () => {
									this.onPostAnswerTap();
								});
								return;
							}
							this.dataObj['answerRemak'] = data['answerRemak'];
							this.dataObj['trueAnswer'] = data['trueAnswer'];
							if(!data['isTrue']) {
								this.dataObj['collect'] = true;
							}
							console.log(this.dataObj['trueAnswer'], 'trueAnswer');
							console.log(this.dataObj['studentAnswer'], 'studentAnswer');
						},
						fail: (err) => {
							console.log(err);
						}
					})
					if (this.dataObj['exercisesType'] === '1') {
						this.getQuestion();
					}
				} else {
					requestErrorTip('toast', '请选择答案');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.question-test{
		padding-top: 18rpx;
		margin-bottom: 190rpx;
		.type{
			width: 84rpx;
			height: 36rpx;
			line-height: 36rpx;
			font-size: 22rpx;
			color: #fff;
			text-align: center;
			border-radius: 7rpx;
			margin-bottom: 30rpx;
		}
		// 单选
		.single{
			background-color: #2176FF;
		}
		// 多选
		.multiple{
			background-color: #14213D;
		}
		.title{
			line-height: 48rpx;
			font-size: 32rpx;
			color: #1A1A1A;
			margin-bottom: 10rpx;
		}
		// 选项
		.options{
			.o-item{
				position: relative;
				line-height: 42rpx;
				font-size: 30rpx;
				color: #7F7F7F;
				background-color: #F7F7F7;;
				padding: 42rpx 20rpx 42rpx 100rpx;
				border-radius: 12rpx;
				margin-bottom: 18rpx;
				.o-item-letter{
					position: absolute;
					top: 50%;
					margin-top: -21rpx;
					left: 36rpx;
					width: 42rpx;
					height: 42rpx;
					line-height: 42rpx;
					font-size: 30rpx;
					color: #7F7F7F;
					border: 1rpx solid #7F7F7F;
					text-align: center;
					border-radius: 50%;
					box-sizing: border-box;
				}
			}
			.selected{
				color: $color-common;
				background-color: #FFF6F0;
				border: 1rpx solid $color-common;
				.o-item-letter{
					color: #FFF;
					background-color: $color-common;
					border: 1rpx solid $color-common;
				}
			}
		}
		// 答案
		.result{
			line-height: 40rpx;
			font-size: 32rpx;
			padding: 20rpx 0 10rpx;
			span{
				padding: 0 8rpx;
			}
			.stonger{
				font-weight: bold;
				color: #1BB682;
			}
			.right{
				color: #1BB682;
			}
			.wrong{
				color: #F21B3F;
			}
		}
		.analysis{
			padding: 10rpx 30rpx;
			.a-title{
				line-height: 48rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: $color-common;
				margin-bottom: 10rpx;
			}
			span{
				line-height: 40rpx;
				font-size: 28rpx;
				color: #7F7F7F;
			}
		}
		// 题目操作
		.opts{
			position: fixed;
			left: 0;
			bottom: 100rpx;
			box-sizing: border-box;
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 28rpx;
			color: #7F7F7F;
			padding: 0 36rpx;
			background-color: #F7F7F7;
			.last{
				float: left;
				position: relative;
				padding-left: 30rpx;
				&::before{
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 30rpx;
					height: 90rpx;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: 30rpx 30rpx;
					background-image: url(../../static/images/common/arrow-left.png);
				}
			}
			.sequence{
				position: absolute;
				top: 0;
				left: 275rpx;
				width: 200rpx;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 26rpx;
				color: #7F7F7F;
				text-align: center;
				.menu-icon{
					display: inline-block;
					width: 40rpx;
					height: 40rpx;
					margin-right: 12rpx;
					vertical-align: middle;
				}
			}
			.next{
				float: right;
				position: relative;
				padding-right: 32rpx;
				&::after{
					content: '';
					position: absolute;
					top: 0;
					right: 0;
					width: 30rpx;
					height: 90rpx;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: 30rpx 30rpx;
					background-image: url(../../static/images/common/arrow-right.png);
				}
			}
		}
		.popup{
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background-color: rgba($color: #000000, $alpha: 0.6);
			.block{
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
				margin-bottom: 0;
				.p-header{
					height: 44rpx;
					line-height: 44rpx;
					font-size: 26rpx;
					color: #1A1A1A;
					margin-bottom: 36rpx;
					.menu-icon{
						float: left;
						width: 44rpx;
						height: 44rpx;
						margin-right: 8rpx;
					}
					.close-icon{
						float: right;
						width: 44rpx;
						height: 44rpx;
					}
				}
				.menu-list{
					height: 50vh;
					font-size: 0;
					overflow-y: auto;
					.menu-item{
						display: inline-block;
						width: 92rpx;
						height: 92rpx;
						line-height: 92rpx;
						font-size: 30rpx;
						color: #7F7F7F;
						text-align: center;
						border-radius: 14rpx;
						background-color: #F7F7F7;
						margin-right: 26rpx;
						margin-bottom: 26rpx;
						&:nth-child(6n){
							margin-right: 0;
						}
					}
					.right{
						color: #1BB682;
						background-color: rgba($color: #1BB682, $alpha: 0.1);
					}
					.wrong{
						color: #F21B3F;
						background-color: rgba($color: #F21B3F, $alpha: 0.1);
					}
					.light{
						color: $color-common;
						background-color: #FFF6F0;
					}
				}
			}
		}
		.footer{
			position: fixed;
			left: 0;
			bottom: 0;
			box-sizing: border-box;
			width: 100%;
			height: 100rpx;
			background-color: #FFF;
			padding: 15rpx 36rpx;
			.reset, .collect{
				display: inline-block;
				line-height: 30rpx;
				width: 100rpx;
				font-size: 20rpx;
				color: #1A1A1A;
				text-align: center;
				.icon{
					display: block;
					width: 48rpx;
					height: 48rpx;
					margin: 0 auto;
				}
			}
			.collected{
				color: #F21B3F;
			}
			.post-btn{
				float: right;
				width: 254rpx;
				height: 70rpx;
				line-height: 70rpx;
				color: #FFF;
				text-align: center;
				background-color: $color-common;
				border-radius: 35rpx;
			}
		}
	}
</style>
